import { createApp } from "vue";
import { createPinia } from "pinia";

import App from "./App.vue";
import { createRouter, createWebHistory } from "vue-router";
import routes from "./router";
import { vantList } from "./plugins/vant"; // vant组件按需引入
import "./assets/main.css";
import "vant/lib/index.css";

document.body.style.setProperty("--color", "#0084ff");
document.body.style.setProperty("--hovercolor", "#4ca9ff");

let router: any = null;
let instance: any = null;
let history: any;

// const app = createApp(App)

// app.use(createPinia())
// app.use(router)
// // 批量注册vant组件
// vantList.forEach(item=>{
//     app.use(item)
// })

// app.mount('#vue3h5')

function render(props: any = {}) {
  instance = createApp(App);
  const { container } = props;
  (history = createWebHistory(window.__POWERED_BY_QIANKUN__ ? "/vue3/" : "/")),
    (router = createRouter({
      history,
      routes,
    }));
  for (const [key, component] of Object.entries([])) {
    instance.component(key, component);
  }

  // installElementPlus(instance)
  // installElementPro(instance)
  vantList.forEach((item) => {
    instance.use(item);
  });

  instance
    .use(createPinia())
    .use(router)
    .mount(container ? container.querySelector("#vue3h5") : "#vue3h5");
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {
  console.log("[vue3 vue3] vue vue3 bootstraped");
}
export async function mount(props: any) {
  console.log("[vue3 vue3] props from main framework", props);
  render(props);
}
export async function unmount() {
  instance.unmount();
  // eslint-disable-next-line
    instance._container.innerHTML = ''
  instance = null;
  router = null;
  history.destroy();
}
/**
 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update() {
  console.log("update");
}
//   if (process.env.NODE_ENV === 'development') {
//     window.qiankunLifecycle = {
//       bootstrap,
//       mount,
//       unmount,
//       update
//     }
//   }
